import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './store';

import { Input, Select, Grid, Button } from '@alifd/next';
import { FormBinderWrapper, FormBinder } from '@icedesign/form-binder';
import IceContainer from '@icedesign/container';
import '@alifd/next/dist/next.css';

const { Row, Col } = Grid;

class OrderSearch extends PureComponent {
  render() {
    const { searchFormValue, searchId } = this.props;

    return (
      <IceContainer title="搜索">
        <FormBinderWrapper value={searchFormValue} onChange={(value) => this.props.searchFormChange(value)}>
          <Row wrap>
            <Col xxs="24" l="10" style={styles.formCol}>
              <span style={styles.label}>交易编号:</span>
              <FormBinder name="id">
                <Input placeholder="请输入待查询交易的编号" />
              </FormBinder>
            </Col>
            {/* <Col xxs="24" l="8" style={styles.formCol}>
              <span style={styles.label}>交易类型:</span>
              <FormBinder name="orderType">
                <Select defaultValue="系统订单">
                  <Select.Option value="系统订单">系统订单</Select.Option>
                  <Select.Option value="版权交易">版权交易</Select.Option>
                  <Select.Option value="版权授权">版权授权</Select.Option>
                </Select>
              </FormBinder>
            </Col>
            <Col xxs="24" l="10" style={styles.formCol}>
              <span style={styles.label}>买家ID:</span>
              <FormBinder name="buyerId">
                <Input placeholder="请输入待查询交易买家ID" />
              </FormBinder>
            </Col>
            <Col xxs="24" l="10" style={styles.formCol}>
              <span style={styles.label}>卖家ID:</span>
              <FormBinder name="sellerId">
                <Input placeholder="请输入待查询交易卖家ID" />
              </FormBinder>
            </Col> */}
            <Col xxs="24" l="2" style={styles.formCol}>
              <Button type="secondary" size="medium" onClick={() => this.props.searchOrderById(searchId)}>搜索</Button>
            </Col>
          </Row>
        </FormBinderWrapper>
      </IceContainer>
    );
  }
}

const styles = {
  formRow: {
    marginBottom: '18px',
  },
  formCol: {
    display: 'flex',
    alignItems: 'center',
    marginBottom: '20px',
  },
  label: {
    lineHeight: '28px',
    paddingRight: '10px',
    color: '#424242',
  },
  demoContainer: {
    backgroundColor: '#f8f8f8',
    padding: '16px',
  },
  nextSelect: {
    marginRight: '10px',
  }
};

const mapState = (state) => ({
  searchFormValue: state.Order.get('searchFormValue'),
  searchId: state.Order.get('searchId')
});

const mapDispatch = (dispatch) => ({
  searchFormChange(value) {
    dispatch(actionCreators.searchFormChange(value));
  },
  searchOrderById(id) {
    dispatch(actionCreators.searchOrderById(id));
  }
});

export default  connect(mapState, mapDispatch)(OrderSearch);